import { defineStore } from "pinia";

const useSettingStore = defineStore('setting', {
  state: () => ({
    isCollapse: false,
    isRefresh: false,
    refreshKey: 0, // 用于触发组件重新渲染的key
    primaryColor: '#607AFB', // 主题色
  }),
  actions: {
    // 设置侧边栏折叠状态
    setCollapse(isCollapse: boolean) {
      this.isCollapse = !isCollapse
    },

    // 触发页面刷新
    triggerRefresh() {
      // 当refreshKey达到1000时重置为0，避免无限增长
      // 1000次刷新对于正常使用来说已经足够大的范围
      this.refreshKey = (this.refreshKey + 1) % 1000
      this.isRefresh = !this.isRefresh
    },

    // 重置刷新状态
    resetRefresh() {
      this.isRefresh = false
    },

    // 设置主题色
    setPrimaryColor(color: string) {
      this.primaryColor = color

      // 更新 Element Plus 和自定义主题色 CSS 变量
      document.documentElement.style.setProperty('--el-color-primary', color)
      document.documentElement.style.setProperty('--primary-color', color)

      // 计算并设置衍生颜色
      const { r, g, b } = this.hexToRgb(color) || { r: 96, g: 122, b: 251 }

      // 浅色版本（增加亮度）
      const lightColor = this.adjustBrightness(r, g, b, 20)
      document.documentElement.style.setProperty('--primary-color-light', lightColor)

      // 深色版本（降低亮度）
      const darkColor = this.adjustBrightness(r, g, b, -10)
      document.documentElement.style.setProperty('--primary-color-dark', darkColor)

      // hover 状态
      const hoverColor = this.adjustBrightness(r, g, b, -5)
      document.documentElement.style.setProperty('--primary-color-hover', hoverColor)

      // active 状态
      const activeColor = this.adjustBrightness(r, g, b, -15)
      document.documentElement.style.setProperty('--primary-color-active', activeColor)

      // 禁用状态（更浅）
      const disabledColor = this.adjustBrightness(r, g, b, 60)
      document.documentElement.style.setProperty('--primary-color-disabled', disabledColor)

      // 透明度变体
      document.documentElement.style.setProperty('--primary-color-alpha-10', `rgba(${r}, ${g}, ${b}, 0.1)`)
      document.documentElement.style.setProperty('--primary-color-alpha-20', `rgba(${r}, ${g}, ${b}, 0.2)`)
      document.documentElement.style.setProperty('--primary-color-alpha-30', `rgba(${r}, ${g}, ${b}, 0.3)`)
    },

    // Hex 颜色转 RGB
    hexToRgb(hex: string): { r: number; g: number; b: number } | null {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1]!, 16),
        g: parseInt(result[2]!, 16),
        b: parseInt(result[3]!, 16)
      } : null
    },

    // 调整颜色亮度
    adjustBrightness(r: number, g: number, b: number, amount: number): string {
      const newR = Math.min(255, Math.max(0, r + amount))
      const newG = Math.min(255, Math.max(0, g + amount))
      const newB = Math.min(255, Math.max(0, b + amount))

      return '#' + [newR, newG, newB]
        .map(x => x.toString(16).padStart(2, '0'))
        .join('')
    },

    // 初始化主题
    initTheme() {
      // 使用 setPrimaryColor 方法初始化所有主题色变量
      this.setPrimaryColor(this.primaryColor)
    }
  },
  persist: {
    key: 'setting', // 存储的key名
    storage: localStorage, // 存储方式
    pick: ['isCollapse', 'primaryColor'], // 指定需要持久化的状态字段
  },
})

export default useSettingStore
